<template>
    <div class="box">
      <h2>Son2 子组件 -{{ title }}</h2>
      从vuex中获取的值:<label>{{ count }}</label>

      <br />
      <button @click="subCount(1)">值 - 1</button>
      <button @click="subCount(15)">值 - 15</button>
      <button @click="subCount(100)">值 - 100</button>
      <button @click="changeCountAction(888)">一秒后改成888</button>
      <button @click="changeTitle('前端程序员')">改改标题吧</button>

      <hr>
      <div>{{ filterList }}</div>
      <!-- 访问模块中的state -->
      <div>{{ user }}</div>
      <div>{{ setting }}</div>
      <hr>
      <!-- 访问模块中的state -->
      <div>user模块的数据-{{ userInfo }}</div>
      <button @click="setUser({name: 'xiaoli', age: 80})">更新个人信息</button>
      <div>setting模块数据{{ theme }} - {{ desc }}</div>
      <button @click="setTheme('skyblue')">革新主题</button>
      <hr>
      <!-- 访问模块中的getters -->
       <div>{{ UpperCaseName }}</div>
    </div>
  </template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Son2Com',
  computed: {
    // mapState 和 mapGetters 都是映射属性
    ...mapState(['count', 'title', 'user', 'setting']),
    // 想要直接访问子模块里面的数据 ...mapState('子模块名字', ['属性'， ‘属性])
    ...mapState('user', ['userInfo']),
    ...mapState('setting', ['theme', 'desc']),
    ...mapGetters(['filterList']), // 根级别
    ...mapGetters('user', ['UpperCaseName'])
  },
  methods: {
    // mapMutations 和 mapActions 都是映射方法
    // 全局级别映射
    ...mapMutations(['subCount', 'changeTitle']),
    // handleSub (n) {
    //   this.$store.commit('subCount', n)
    // }
    ...mapActions(['changeCountAction']),

    // 分模块的映射
    ...mapMutations('setting', ['setTheme']),
    ...mapMutations('user', ['setUser'])
  }
}
</script>

  <style lang="css" scoped>
  .box {
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
  }
  h2 {
    margin-top: 10px;
  }
  </style>
